App.require(["htmlTool", "canvasTool"], function (htmlTool, canvasTool) {
    var app = App.getCurrent();

    app.defineLayer("str-dashboard-chart", {
        render: function (next) {
            this.initProperty();
            this.data.isChange = true;
            this.data.isMouseIn = false;
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        initProperty: function () {
            this.data.attributeStr = this._createPropertyStr(this.property);
        },
        beforeInit: function (next) {
            var property = this.property;
            this.data.steps = htmlTool.getOptions(this.getSlotByName("steps").content);
            this.data.markers = htmlTool.getOptions(this.getSlotByName("markers").content);
            if (property.animation) this.addPropertyAnimation(property.animation, this);
            next();
        },
        transformView: function (ctx, ratio) {
            ctx.translate(this.x * ratio, this.y * ratio);
            if (this.transform) {
                var tList = canvasTool.createTransformList(this.transform, ratio);
                for (var i = 0; i < tList.length; i++) {
                    var tObj = tList[i];
                    ctx[tObj.action].apply(ctx, tObj.args);
                }
            }
        },
        drawSelf: function (ctx, ratio) {
            var property = this.property;
            if (typeof this.opacity !== "undefined") ctx.globalAlpha = parseFloat(this.opacity);
            if (this.hidden) return;
            this.transformView(ctx, ratio);
            var keyToCanvas = canvasTool.keyToCanvas;
            for (var key in property) {
                var ctxKey = keyToCanvas[key];
                if (ctxKey) {
                    if (ctxKey == "fillStyle" || ctxKey == "strokeStyle") continue;
                    else ctx[ctxKey] = this[key];
                }
            }

            if ("linedash" in property) {
                ctx.setLineDash(this.linedash.split(/\s+/).map(function (item) {
                    return parseFloat(item) * ratio;
                }))
            }
            if (this.shadow) {
                var obj = canvasTool.changeShadowStr(this.shadow, ratio);
                if (obj) {
                    ctx.shadowOffsetX = obj.x;
                    ctx.shadowOffsetY = obj.y;
                    ctx.shadowBlur = obj.blur;
                    ctx.shadowColor = obj.color;
                }
            }
        },
        get transform() {
            return this.getValue("transform");
        },
        set transform(value) {
            this.setValue("transform", value);
        },
        set hidden(value) {
            this.setValue("hidden", value);
        },
        get hidden() {
            return this.getValue("hidden");
        },
        set opacity(value) {
            this.setValue("opacity", value);
        },
        get opacity() {
            return this.getValue("opacity");
        },
        get animation() {
            return this.getValue("animation");
        },
        set animation(value) {
            if (this.setValue("animation", value)) {
                if (value) this.addPropertyAnimation(value, this);
            }
        },
        set transition(value) {
            this.setValue("transition", value);
        },
        get transition() {
            return this.getValue("transition");
        },
        get y() {
            return this.getValue("y");
        },
        set y(value) {
            this.setValue("y", value);
        },
        get x() {
            return this.getValue("x");
        },
        set x(value) {
            this.setValue("x", value);
        },
    })
});